<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资源管理</title>
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap-icons/font/bootstrap-icons.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <th:block th:replace="~{fragments/header :: navbarStyles}"></th:block>
    <style>
        .resource-card {
            transition: transform 0.2s;
        }
        .resource-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .status-badge {
            font-size: 0.8rem;
        }
        .status-available { background-color: #d4edda; color: #155724; }
        .status-in-use { background-color: #fff3cd; color: #856404; }
        .status-maintenance { background-color: #f8d7da; color: #721c24; }
        .status-retired { background-color: #e2e3e5; color: #383d41; }
        .filter-section {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .access-denied {
            text-align: center;
            padding: 50px 20px;
            color: #6c757d;
        }
        .access-denied i {
            font-size: 4rem;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 权限检查区域 -->
    <div id="accessDenied" class="access-denied" style="display: none;">
        <i class="bi bi-shield-exclamation"></i>
        <h3>访问被拒绝</h3>
        <p>请先登录系统。</p>
        <a href="/ercms/login" class="btn btn-primary">去登录</a>
    </div>

    <!-- 主要内容区域 -->
    <div id="mainContent" style="display: none;">
        <div th:replace="~{fragments/header :: navbar}"></div>
        <div class="container-fluid mt-3">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h2><i class="bi bi-gear"></i> 资源管理</h2>
                        <button class="btn btn-primary" onclick="showCreateResourceModal()" id="createResourceBtn">
                            <i class="bi bi-plus"></i> 新建资源
                        </button>
                    </div>
                </div>
            </div>

            <!-- 筛选区 -->
            <div class="filter-section">
                <div class="row">
                    <div class="col-md-3">
                        <label class="form-label">部门筛选</label>
                        <select class="form-select" id="departmentFilter" onchange="filterResources()">
                            <option value="">所有部门</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">资源类型</label>
                        <select class="form-select" id="typeFilter" onchange="filterResources()">
                            <option value="">所有类型</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">状态筛选</label>
                        <select class="form-select" id="statusFilter" onchange="filterResources()">
                            <option value="">所有状态</option>
                            <option value="AVAILABLE">可用</option>
                            <option value="IN_USE">使用中</option>
                            <option value="MAINTENANCE">维护中</option>
                            <option value="RETIRED">已报废</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">搜索</label>
                        <input type="text" class="form-control" id="searchInput" placeholder="搜索资源名称..." onkeyup="filterResources()">
                    </div>
                </div>
            </div>

            <!-- 资源列表 -->
            <div class="row" id="resourceList">
                <!-- 资源卡片将在这里动态生成 -->
            </div>

            <!-- 加载提示 -->
            <div id="loadingSpinner" class="text-center d-none">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建/编辑资源模态框 -->
    <div class="modal fade" id="resourceModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">创建资源</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="resourceForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="resourceName" class="form-label">资源名称 *</label>
                                    <input type="text" class="form-control" id="resourceName" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="resourceType" class="form-label">资源类型 *</label>
                                    <div class="input-group">
                                        <select class="form-control" id="resourceType" required>
                                            <option value="">请选择资源类型</option>
                                        </select>
                                        <button class="btn btn-outline-secondary" type="button" onclick="showCreateResourceTypeModal()">新建类型</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="resourceStatus" class="form-label">状态*</label>
                                    <select class="form-control" id="resourceStatus" required>
                                        <option value="AVAILABLE">可用</option>
                                        <option value="IN_USE">使用中</option>
                                        <option value="MAINTENANCE">维护中</option>
                                        <option value="RETIRED">已报废</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="resourceDepartment" class="form-label">所属部门</label>
                                    <select class="form-control" id="resourceDepartment">
                                        <option value="">请选择部门</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="resourceLocation" class="form-label">位置</label>
                            <input type="text" class="form-control" id="resourceLocation" placeholder="资源所在位置">
                        </div>
                        <div class="mb-3">
                            <label for="resourceDescription" class="form-label">描述</label>
                            <textarea class="form-control" id="resourceDescription" rows="3" placeholder="资源详细描述"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveResource()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 分配部门模态框 -->
    <div class="modal fade" id="assignDepartmentModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">分配资源到部门</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="assignDepartment" class="form-label">选择部门</label>
                        <select class="form-control" id="assignDepartment">
                            <option value="">请选择部门</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="assignResourceToDepartment()">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 新建资源类型模态框 -->
    <div class="modal fade" id="resourceTypeModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">新建资源类型</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="resourceTypeForm">
                        <div class="mb-3">
                            <label for="resourceTypeName" class="form-label">类型名称 *</label>
                            <input type="text" class="form-control" id="resourceTypeName" required>
                        </div>
                        <div class="mb-3">
                            <label for="resourceTypeDesc" class="form-label">描述</label>
                            <textarea class="form-control" id="resourceTypeDesc" rows="2"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveResourceType()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/lib/bootstrap/js/bootstrap.bundle.min.js}"></script>
      <script th:src="@{/js/navbar.js}"></script>
    <script th:src="@{/js/auth.js}"></script>
    <script th:src="@{/js/permission.js}"></script>
    <script th:src="@{/js/resource.js}"></script>
</body>
</html> 
